<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic Handler | Jcrop Demo</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.Jcrop.js"></script>
    <script type="text/javascript">

        jQuery(function ($) {

            var jcrop_api;

            $('#target').Jcrop({
                onChange: showCoords,
                onSelect: showCoords,
                onRelease: clearCoords
            }, function () {
                jcrop_api = this;
            });

            $('#coords').on('change', 'input', function (e) {
                var x1 = $('#x1').val(),
                    x2 = $('#x2').val(),
                    y1 = $('#y1').val(),
                    y2 = $('#y2').val();
                jcrop_api.setSelect([x1, y1, x2, y2]);
            });

        });

        // Simple event handler, called from onChange and onSelect
        // event handlers, as per the Jcrop invocation above
        function showCoords(c) {
            $('#x1').val(c.x);
            $('#y1').val(c.y);
            $('#x2').val(c.x2);
            $('#y2').val(c.y2);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };

        function clearCoords() {
            $('#coords input').val('');
        };


    </script>
    <link rel="stylesheet" href="demo_files/main.css" type="text/css"/>
    <link rel="stylesheet" href="demo_files/demos.css" type="text/css"/>
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css"/>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="jc-demo-box">

                <div class="page-header">
                    <ul class="breadcrumb first">
                        <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
                        <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
                        <li class="active">Basic Handler</li>
                    </ul>
                    <h1>Basic Handler</h1>
                </div>

                <!-- This is the image we're attaching Jcrop to -->
                <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]"/>

                <!-- This is the form that our event handler fills -->
                <form id="coords"
                      class="coords"
                      onsubmit="return false;"
                      action="http://example.com/post.php">

                    <div class="inline-labels">
                        <label>X1 <input type="text" size="4" id="x1" name="x1"/></label>
                        <label>Y1 <input type="text" size="4" id="y1" name="y1"/></label>
                        <label>X2 <input type="text" size="4" id="x2" name="x2"/></label>
                        <label>Y2 <input type="text" size="4" id="y2" name="y2"/></label>
                        <label>W <input type="text" size="4" id="w" name="w"/></label>
                        <label>H <input type="text" size="4" id="h" name="h"/></label>
                    </div>
                </form>

                <div class="description">
                    <p>
                        <b>An example with a basic event handler.</b> Here we've tied
                        several form values together with a simple event handler invocation.
                        The result is that the form values are updated in real-time as
                        the selection is changed using Jcrop's <em>onChange</em> handler.
                    </p>

                    <p>
                        That's how easily Jcrop can be integrated into a traditional web form!
                    </p>
                </div>


                <div class="tapmodo-footer">
                    <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
                    <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br/>
                        Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
                    </div>
                </div>

                <div class="clearfix"></div>

            </div>
        </div>
    </div>
</div>

</body>
</html>

